<template>
	<div class="content">
		<!--今日数据一览-->
		<div class="today-info">
			<div class="today-item" v-for="(item, index) in todayInfoList" :key="item.name">
				<img
					class="icon"
					src="@/assets/images/home/overview_icon1.png"
					v-if="index === 0"
				/>
				<img
					class="icon"
					src="@/assets/images/home/overview_icon2.png"
					v-if="index === 1"
				/>
				<img
					class="icon"
					src="@/assets/images/home/overview_icon3.png"
					v-if="index === 2"
				/>
				<img
					class="icon"
					src="@/assets/images/home/overview_icon4.png"
					v-if="index === 3"
				/>
				<img
					class="icon"
					src="@/assets/images/home/overview_icon5.png"
					v-if="index === 4"
				/>
				<div class="right">
					<h3 class="name">{{ item.name }}</h3>
					<p class="value">{{ item.value }}</p>
					<p class="rate" :class="[parseFloat(item.rate) >= 0 ? 'increase' : 'reduce']">
						{{ item.rate }}%<i
							:class="[parseFloat(item.rate) >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
						></i>
					</p>
				</div>
			</div>
		</div>

		<!--订单相关-->
		<div class="order-info">
			<div class="title">订单相关</div>
			<div class="order-list">
				<div
					class="order-item"
					v-for="item in orderInfoList"
					:key="item.name"
					@click="toOrderList(item)"
					style="cursor: pointer"
				>
					<p class="value">{{ item.value }}</p>
					<p class="name">{{ item.name }}</p>
				</div>
			</div>
		</div>

		<!--实时数据-->
		<div class="chart-info">
			<div class="title">实时数据</div>
			<div class="e-chart">
				<e-chart ref="charts"></e-chart>
			</div>
		</div>

		<!--实时数据-->
		<div class="rank-list">
			<div class="rank-item">
				<div class="title">商品销量排行</div>
				<el-table
					ref="goodsRankTable"
					:data="goodsRankList"
					:row-class-name="tableRowClassName"
					style="width: 100%"
				>
					<el-table-column label="排行" align="center" width="80">
						<template slot-scope="scope">
							<img
								class="rank-icon"
								:src="
									require('@/assets/images/home/rank_' +
										(scope.$index + 1) +
										'.png')
								"
								v-if="scope.$index < 3"
							/>
							<span v-else>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="商品" align="left">
						<template slot-scope="scope">
							<div class="goods-info">
								<img :src="scope.row.pic" />
								<p>{{ scope.row.title }}</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column property="salesGoods" label="销量" align="center" width="120">
					</el-table-column>
					<el-table-column property="payment" label="订单金额" align="center" width="150">
					</el-table-column>
				</el-table>
			</div>
			<div class="rank-item">
				<div class="title">用户出单排行</div>
				<el-table
					ref="goodsRankTable"
					:data="userRankList"
					:row-class-name="tableRowClassName"
					style="width: 100%"
				>
					<el-table-column label="排行" align="center" width="80">
						<template slot-scope="scope">
							<img
								class="rank-icon"
								:src="
									require('@/assets/images/home/rank_' +
										(scope.$index + 1) +
										'.png')
								"
								v-if="scope.$index < 3"
							/>
							<span v-else>{{ scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="用户名" align="center">
						<template slot-scope="scope">
							<div class="user-info">
								<!--								<img :src="scope.row.pic" />-->
								<p>{{ scope.row.username }}</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column property="count" label="订单数" align="center">
					</el-table-column>
					<el-table-column property="payPrice" label="订单金额" align="center">
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import EChart from '@/components/EChart';
export default {
	name: 'home',
	components: {
		EChart
	},
	data() {
		return {
			todayInfoList: [
				{
					name: '今日交易额(元)',
					value: 0,
					rate: 0
				},
				{
					name: '今日总订单数',
					value: 0,
					rate: 0
				},
				{
					name: '今日客单价',
					value: 0,
					rate: 0
				},
				{
					name: '今日新增用户数',
					value: 0,
					rate: 0
				},
				{
					name: '今日访问人数',
					value: 0,
					rate: 0
				}
			],
			orderInfoList: [
				{
					name: '待发货订单',
					value: 0,
					status: 1
				},
				{
					name: '待收货订单',
					value: 0,
					status: 2
				},
				{
					name: '已完成订单',
					value: 0,
					status: 3
				}
			],
			goodsRankList: [],
			userRankList: []
		};
	},
	created() {
		this.getTodayInfo();
		this.getTodayOrderInfo();
		this.getEChartInfo();
		this.getGoodsRankList();
		this.getUserRankList();
	},
	methods: {
		// 获取今日数据
		getTodayInfo() {
			this.$service.home.todayInfo().then(res => {
				this.todayInfoList[0].value = res.orderMoney.value;
				this.todayInfoList[0].rate = res.orderMoney.rate;

				this.todayInfoList[1].value = res.orderCount.value;
				this.todayInfoList[1].rate = res.orderCount.rate;

				this.todayInfoList[2].value = res.perOrderMoney.value;
				this.todayInfoList[2].rate = res.perOrderMoney.rate;

				this.todayInfoList[3].value = res.increaseUser.value;
				this.todayInfoList[3].rate = res.increaseUser.rate;

				this.todayInfoList[4].value = res.visitUser.value;
				this.todayInfoList[4].rate = res.visitUser.rate;
			});
		},
		// 获取今日订单相关
		getTodayOrderInfo() {
			this.$service.home.orderInfo().then(res => {
				this.orderInfoList[0].value = res.notDeliver;
				this.orderInfoList[1].value = res.notReceive;
				this.orderInfoList[2].value = res.succeed;
			});
		},
		// 获取实时数据
		getEChartInfo() {
			let d = moment().subtract(10, 'day');

			let startTime = d
				.hour(0)
				.minute(0)
				.second(0)
				.format('YYYY-MM-DD HH:mm:ss');
			let endTime = moment().format('YYYY-MM-DD 23:59:59');

			this.$service.home
				.chartInfo({
					startTime: startTime,
					endTime: endTime
				})
				.then(res => {
					this.$refs['charts'].refresh(this.formatChart(res));
				});
		},
		// 格式化图表数据
		formatChart(list) {
			const titleArr = ['交易额', '订单数'];
			let obj = {
				data: titleArr.map(item => {
					return {
						name: item,
						type: 'line',
						data: [],
						smooth: true
					};
				}),
				xAxis: [],
				legendSelect: {},
				lengend: titleArr
			};

			titleArr.map(item => {
				obj.legendSelect[item] = true;
			});
			list.map(item => {
				obj.data[0].data.push(item.money);
				obj.data[1].data.push(item.count);
				obj.xAxis.push(item.date);
			});

			return obj;
		},
		// 获取商品销量排行
		getGoodsRankList() {
			this.$service.statistics.goodsRank().then(res => {
				this.goodsRankList = res;
			});
		},
		// 获取用户出单排行
		getUserRankList() {
			this.$service.home.userRank().then(res => {
				this.userRankList = res;
			});
		},
		// 表格行渲染
		tableRowClassName({ row, rowIndex }) {
			console.log(row);
			if (rowIndex > 0) {
				if (rowIndex % 2 === 1) {
					return 'active';
				} else {
					return '';
				}
			} else {
				return '';
			}
		},
		toOrderList(item) {
			this.$router.push({
				path: '/order/ordinary',
				query: {
					status: item.status
				}
			});
		}
	}
};
</script>

<style lang="stylus" scoped>
.content {
	padding: 20px 26px;
	overflow: auto;
	.title {
		color: #1E1E1E;
		font-size: 18px;
		font-weight: 600;
	}
	.today-info {
		flexBox(space-between);
		.today-item {
			width: 19%;
			height: 120px;
			background: #fff;
			border-radius: 8px;
			flexBox(center, center);
			.icon {
				width: 44px;
				height: 44px;
				margin-right: 24px;
			}
			.name {
				font-size: 16px;
				color: #5A5A5A;
			}
			.value {
				font-size: 26px;
				color: #1E1E1E;
				margin: 4px 0;
			}
			.rate {
				font-size: 14px;
				&.increase {
					color: #F72635;
				}
				&.reduce {
					color: #01B700;
				}
			}
		}
	}
	.order-info {
		margin-top: 25px;
		background: #fff;
		border-radius: 8px;
		padding: 20px 25px;
		.order-list {
			flexBox(space-around);
			.order-item {
				font-size: 18px;
				flexBox(center, center, column);
				.value {
					color: #FF6A24;
					margin: 10px 0;
				}
				.name {
					color: #5A5A5A;
				}
			}
		}
	}
	.chart-info {
		margin-top: 25px;
		background: #fff;
		border-radius: 8px;
		padding: 20px 25px;
	}
	.rank-list {
		margin-top: 25px;
		flexBox(space-between);
		.rank-item {
			padding: 20px 0;
			height: 400px;
			background: #fff;
			border-radius: 8px;
			width: 49%;
			.title {
				padding: 0 25px;
			}
		}
	}
	/deep/.el-table{
		td {
			height: 62px;
			padding: 0;
			border-bottom: none;
		}
		.active {
			background: #F5F6FD;
		}
		.rank-icon {
			width: 30px;
		}
		.goods-info {
			width: 100%;
			flexBox(center, center);
			img {
				width: 50px;
				height: 50px;
			}
			p {
				flex: 1;
				margin-left: 14px;
				color: #333333;
			}
		}
	}

}
</style>
